<template>
    <div class="deal_img" style="display: none;">
      <img src="" class="js_share_img" alt="">
      <input type="file" style="display: none;" multiple @change="file_change" accept="image/*" class="js_sele_file">
    </div>
</template>

<script>
var app;
import $ from "jquery";
export default {
  name: 'dealImg',
  props: {

  },
  data () {
    return {
      cWidth:0,
      cHeight:0,
      type:1,
      arr:[]
    }
  },
  created(){

  },
  methods:{
    add_media(type,callback){
      this.arr=[];
      $('.js_sele_file').click()
    },
    dataURLtoBlob: function(dataurl) {
        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    },
    //将blob转换为file
    blobToFile: function(theBlob, fileName){
       theBlob.lastModifiedDate = new Date();
       theBlob.name = fileName;
       return theBlob;
    },
    file_change(e){
      let files=e.target.files;
      var index=0;
      const _this=this;
      function load_img(){
      	if(index<files.length){
      		var file = files[index];
      		var reader = new FileReader();
      		reader.onloadend = function () {
      		    // _this.water(reader.result,file,function(res){
      		    
      		    
      		      let res={
      		        file:file,
      		        img:reader.result
      		      }
      		      _this.arr.push(res);
      		      // console.log(res)
      		      index++;
      		      if(index<files.length){
      		        load_img()
      		      }else{
      		        _this.$emit("handleDeal",_this.arr);
      		      }
      		    // })
      		}
      		if (file) {
      		    reader.readAsDataURL(file);
      		}
      	}
      }
      load_img()
    },
    showTime(){
        var myDate = new Date();
        var year = myDate.getFullYear();
        var month =formatTime( myDate.getMonth() + 1);
        var date = formatTime(myDate.getDate());
        var dateArr = ["日","一",'二','三','四','五','六'];
        var day = formatTime(myDate.getDay());
        var hours = formatTime(myDate.getHours());
        var minutes = formatTime(myDate.getMinutes());
        var seconds = formatTime(myDate.getSeconds());
     
        let time = year + "-" + month +"-" + date + " "+ hours + ":" + minutes + ":" + seconds;
        return time
        //格式化时间：分秒。
        function formatTime (i){
          if(i < 10){
            i = "0" + i;
          }
          return i;
        }
    },
    water(dataURL,file,callback){
      const _this=this;
      var image=new Image();
      $('.deal_img canvas').remove()
      image.onload=function(){
        var logo_image=new Image();
        logo_image.onload=function(){
           do_next()
        }
        logo_image.src='../../static/sy_logo.png'

        function do_next(){
          var ratio = 1.1;
          var canvasWidth = image.width //图片原始长宽
          var canvasHeight = image.height;
          while (canvasWidth > 1000 || canvasHeight > 1000){//
            canvasWidth = Math.trunc(image.width / ratio)
            canvasHeight = Math.trunc(image.height / ratio)
            ratio+=0.1;
          }

          var canvas=document.createElement('canvas');
          canvas.width=canvasWidth;
          canvas.height=canvasHeight;
          var ctx=canvas.getContext('2d');

          ctx.drawImage(image,0,0,canvasWidth,canvasHeight);

          // 添加水印
          let syw=400;
          let syh=102;
          let rate=0.8;
          ctx.drawImage(logo_image, canvasWidth*(1-rate)*0.5, canvasHeight*0.5-canvasWidth*rate*syh*0.5/syw, canvasWidth*rate, canvasWidth*rate*syh/syw)

          let fontsize=canvasWidth/30//一行30字
          ctx.font = fontsize+"px Arial";
          ctx.fillStyle='#fff';
          ctx.fillText(_this.$store.state.cur_pro.title, fontsize+1, canvasHeight-fontsize*1.6*2+1);
          ctx.fillStyle='red';
          ctx.fillText(_this.$store.state.cur_pro.title, fontsize, canvasHeight-fontsize*1.6*2);

          // console.log(getApp().getMyDate(Date.now(),'year_time'))
          ctx.fillStyle='#fff';
          ctx.fillText(_this.showTime(), fontsize+1, canvasHeight-fontsize*1.6*1+1);
          ctx.fillStyle='red';
          ctx.fillText(_this.showTime(), fontsize, canvasHeight-fontsize*1.6*1);
          $('.deal_img').append(canvas);
          let img= canvas.toDataURL('image/jpeg');


          //调用
          let blob = _this.dataURLtoBlob(img);
          let n_file = _this.blobToFile(blob, file.name);
          callback({file:n_file,img})
        }


      }
      image.src=dataURL;

    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
